<template>
	<view>
		<view class="login" @click="toEdit">
			<!-- 		<view class="user-avatar">
				<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" mode=""></image>
				<image v-else src="../../static/icons/avatar.png" mode=""></image>
			</view> -->
			<view class="login-text">
				<text class="user-name"
					style="font-size: 32rpx;font-weight: bold;">{{userInfo.nickName?userInfo.nickName:"微信用户"}}</text>

				<!-- <button v-else type="default" @click="getUserInfo">登录</button> -->
				<text class="user-name">{{hideNumber(userInfo.phoneNo)}}</text>
				<text v-if="cardList.length==0" @click.stop="toOpenCard">立即办卡，成为会员</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCardList
	} from '../../common/http/api.js'
	export default {
		props: ['userInfo'],
		data() {
			return {
				cardList: []
			}
		},
		methods: {

			getCardList() {
				getCardList(uni.getStorageSync("openId")).then(res => {
					const {
						code,
						data
					} = res
					if (code === "000") {
						this.cardList = data
					}
				})
			},
			toCardList() {
				if (!this.$store.state.userPhone) {
					uni.navigateTo({
						url: "../../pages/getPhone/getPhone"
					})
					return
				}
				uni.navigateTo({
					url: '../../pages/cardList/cardList'
				})
			},
			toOpenCard() {
				uni.navigateTo({
					url: "../../pages/openCard/openCardList"
				})
			},
			getUserInfo(e) {

				uni.navigateTo({
					url: "../../pages/getPhone/getPhone"
				})
			},
			toPoint() {
				if (!this.$store.state.userPhone) {
					uni.navigateTo({
						url: "../../pages/getPhone/getPhone"
					})
					return
				}
				// uni.showToast({
				// 	title:"敬请期待",
				// 	icon:"none"
				// })
			},
			toEdit() {
				uni.navigateTo({
					url: "../../pages/editInfo/editInfo"
				})
			}


		},
		created() {
			this.getCardList()
		},
		computed: {
			hideNumber() {
				return (phone) =>
					phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") : ''

			}

		}
	}
</script>

<style lang="scss">
	.login {
		display: flex;
		align-items: center;
		padding: 40rpx 20rpx 15rpx 20rpx;

		.next {
			display: flex;
			align-items: center;
			font-size: 26rpx;

			image {
				width: 25rpx;
				height: 25rpx;
				margin-left: 5rpx;
			}
		}

		.user-avatar {
			image {
				height: 160rpx;
				width: 160rpx;
				border-radius: 50%;
			}
		}

		.login-text {
			// height: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 15rpx 0 0 35rpx;
			width: 50%;

			button {
				line-height: 50rpx;
				border: none;
				background: unset;

			}

			button:after {
				border: none;

			}

			text {
				line-height: 50rpx;
				font-size: 28rpx;
				text-decoration: underline;

			}

			.user-name {
				text-decoration: none;
			}
		}
	}

	.user-server {
		display: flex;
		justify-content: space-between;
		padding: 0 80rpx;
		align-items: center;

		.server {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				font-size: 26rpx;
				line-height: 60rpx;
			}
		}
	}
</style>